<template>
  <div>
    <el-form ref="roleEditRuleForm" :model="roleEditRuleForm" :rules="roleEditRules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="角色名称" prop="sysRoleName">
        <el-input v-model="roleEditRuleForm.sysRoleName" />
      </el-form-item>
      <el-form-item label="角色类型" prop="sysRoleType">
        <el-select v-model="roleEditRuleForm.sysRoleType" placeholder="请选择角色类型">
          <el-option label="管理员" value="0" />
          <el-option label="普通员工" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态:" prop="sysRoleStatus">
        <el-radio v-model="roleEditRuleForm.sysRoleStatus" class="input radio" label="0" border size="medium">启用</el-radio>
        <el-radio v-model="roleEditRuleForm.sysRoleStatus" class="input radio" label="1" border size="medium">禁用</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitFormRoleEdit('roleEditRuleForm')">确认</el-button>
        <el-button @click="resetFormRoleEdit('roleEditRuleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tip from '@/utils/tip'
import Role from '@/api/axios/api/author/role'
export default {
  name: 'AuthRoleEdit',
  props: {
    authRoleEditObj: {}
  },
  data() {
    return {
      authRoleEditObjTran: {},
      roleEditRuleForm: {
        sysRoleName: '',
        sysRoleType: '',
        sysRoleStatus: '',
        userGroupUuid: ''
      },
      roleEditRules: {
        sysRoleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        sysRoleType: [
          { required: true, message: '请选择角色类型', trigger: 'change' }
        ],
        sysRoleStatus: [
          { required: true, message: '请选择角色状态', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    authRoleEditObj: {
      deep: true,
      immediate: true,
      handler() {
        this.roleEditRuleForm = JSON.parse(JSON.stringify(this.authRoleEditObj))
      }
    }
  },
  methods: {
    submitFormRoleEdit(formName) {
      this.$refs[formName].validate((valid) => {
        this.innerVisibleEdit = false
        if (valid) {
          Role.roleEdit(this.roleEditRuleForm).then(res => {
            Tip.success(res.data)
            setTimeout(() => {
              this.$emit('closeInnerVisibleRoleEdit', this.roleEditRuleForm)
            }, 1000)
          })
        } else {
          return false
        }
      })
    },
    resetFormRoleEdit(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
